<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<style>
			body {
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #bfa;
			}

			input {
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			人民币：<input type="text" v-model.number="rmb">
			美 元：<input type="text" v-model.number="dollar">
			<button>=></button>
			汇 率：<input type="text" v-model.number="getSum">
			<div>{{rmb}}人民币等于{{dollar}}美元</div>

		</div>
		    
		<script>
			var exam = new Vue({
				el: "#app",
				data: {
					rate: 6.8, //汇率
					rmb: 68, //人民币
					dollar: 10, //美元
					//rmb=dollar*rate
				},
				computed: {
					getSum: function() {
						return this.rmb / this.dollar
					}
				}
			})
		</script>    
	</body>
</html>
